window.onload = function () {
    var category_items = this.document.getElementsByClassName("category-item");
    var category_detail_container = this.document.getElementById("category-detail");
    for (let index = 0; index < category_items.length; index++) {
        const element = category_items[index];
        element.onmouseenter = function () {
            category_detail_container.style.display = "block";
            category_detail_container.innerHTML
                = assembleCategoryDetailContent(index);
        }
        element.onmouseleave = function () {
            category_detail_container.setAttribute("style", "display:none");
        }
    }
}

function assembleCategoryDetailContent(index) {
    var category_html = "";

    category_html = '<ul class="category-detail-type">';
    const second_level_category_row_items = second_level_category_items[index];
    for (let i = 0; i < second_level_category_row_items.length; i++) {
        const element = second_level_category_row_items[i];
        category_html += '<li class="category-detail-type-item">' + element + '<span class="iconfont" style="margin-left: 6px;">&#xe603;</span></li>';
    }
    category_html += '</ul>';

    const third_level_category_mat_items = third_level_category_items[index];
    for (let i = 0; i < third_level_category_mat_items.length; i++) {
        const third_level_category_row_items = third_level_category_mat_items[i];
        category_html += '<div><dl>';
        category_html += '<dt>' + third_level_category_row_items[0] + '<span class="iconfont">&#xe603;</span></dt>';
        category_html += '<dd><ul>';
        for (let j = 1; j < third_level_category_row_items.length; j++) {
            category_html += '<li class="category-detail-item">' + third_level_category_row_items[j] + '</li>'
        }
        category_html += '</ul></dd></dl></div>'
    }

    return category_html;
}